<template>
     <!-- 底部播放控制 -->
    <div class="redio_box">
        <!-- 小播放器控制 -->
        <music_palyer class="miniplayer" :musiclist="currentList" :currentIndex="currentIndex" @showplayer="show_player"></music_palyer>

        <!-- 大播放窗口 -->
        <player class="player_max" ref="player" :musiclist="currentList[currentIndex]" :lyricmsg="lyricSrc" @showplayer="show_player" v-show="isPlayerShow" />

        <!-- 上一首 暂停/播放 下一首 -->
        <div class="redio_ctrl">
            <img src="../../../assets/M_redio/up.png" alt="" style="margin-left: 0;" @click="headlelast">
            <span class="ctrl" @click="change">
                <img src="../../../assets/M_redio/stop.png" alt="" v-show="isPlay">
                <img src="../../../assets/M_redio/go.png" alt="" v-show="!isPlay">
            </span>
            <img src="../../../assets/M_redio/down.png" alt="" @click="handleNext">
        </div>

        <!-- 进度条 -->
        <div class="progress_bar">
            <!--  -->
            <audio 
                autoplay 
                @ended="handleEnded" 
                @timeupdate="getaudioTime" 
                @canplay="getaudioTime"
                :src="currentList[currentIndex].sing_url" 
                ref="audio"
            ></audio> 

            <p style="margin-right: 8px;">{{ currentTime }}</p>
            <bar_progress ref="music_bar" @bar_click="setProgress" />
            <p style="margin-left: 8px;">{{ duration }}</p>
        </div>
        
        <!-- 音量 -->
        <div class="voice_box">
            <div class="voice" @click="vioce_change">
                <img src="../../../assets/M_redio/vioce.png" v-show="!isVoice">
                <img src="../../../assets/M_redio/novioce.png" v-show="isVoice">
            </div>
            <voice_box ref="volume" @voice_ctrl="setVolume"></voice_box>
        </div>

        <!-- 播放模式 -->
        <div class="play_model">
            <div class="now_model" @click="change_model">
                <img title="顺序播放" src="../../../assets/M_redio/bofang_shunxu.png" alt="" v-show="model_index==0">
                <img title="随机播放" src="../../../assets/M_redio/bofang_suiji.png" alt=""  v-show="model_index==1">
                <img title="单曲循环" src="../../../assets/M_redio/bofang_dandu.png" alt=""  v-show="model_index==2">
            </div>
        </div>

        <!-- 歌词变换 -->
        <div class="lyric_change" @click="change_lyric">
            <img src="../../../assets/M_redio/lyric.png" v-show="!isLyric" title="歌词">
            <img src="../../../assets/M_redio/lyric_change.png" v-show="isLyric" title="歌词">
        </div>

        <!-- 歌词列表 -->
        <lyric_box class="music_lyric" ref="lyric" :lyric="lyricSrc" @change_lyric="change_lyric"  v-show="isLyric"></lyric_box>

        <!-- 歌单 -->
        <div class="bofang_list" @click="change_MusicList">
            <img src="../../../assets/M_redio/bofang_list.png" title="播放列表">
        </div>

        <music_list class="player_list" v-show="isList" :musiclist="currentList" :currentIndex="currentIndex" @playCurrentMusic="playCurrentMusic" @playheart="addheart" @deleteheart="delheart" />

    </div>
</template>

<script>
// 导入 moment 时间插件
import moment from 'moment';
import bar_progress from './bar_progress';
import voice_box from './vioce_box';
import lyric_box from './lyric_box';
import music_list from './music_list';
import music_palyer from './music_palyer';
import player from './player_max';

export default {
    data() {
        return {
            // 底部播放控制
            isPlay: false, // true正在播放
            isVoice: false, // 是否静音
            isLyric: false, // 是否显示歌词
            lyricSrc: "", // 当前歌曲歌词所在路径
            isList: false, // 是否显示播放列表
            isPlayerShow: false, // 是否显示当前播放歌曲的信息
            persent: 0.8,   // 音量
            bar_persent: 0, // 播放进程
            model_index: 0, // 播放模式索引
            musicData:[
                { 
                    id: 1, 
                    name:"电视剧《锦衣之下》-今夏", 
                    singer:"谭松韵",
                    sing_name:"谭松韵 - 今夏", 
                    sing_img: require("../../../assets/M_sing/jinxia.jpg"), 
                    sing_url: require("../../../assets/M_sing/谭松韵 - 今夏.mp3"),
                    sing_lrc: "[ti:今夏]\n"+
                            "[ar:谭松韵]\n"+
                            "[al:电视剧《锦衣之下》插曲]\n"+
                            "[by:junbo]\n"+
                            "[offset:0]\n"+
                            "[00:00.10]今夏 - 谭松韵\n"+
                            "[00:01.33]词：潇彬\n"+
                            "[00:01.99]曲：王梓赫Ray\n"+
                            "[00:03.12]制作人：王梓赫Ray\n"+
                            "[00:04.79]编曲：金若晨\n"+
                            "[00:05.95]弦乐编写：金若晨\n"+
                            "[00:07.67]吉他：张楚弦\n"+
                            "[00:07.84]弦乐：国际首席爱乐乐团@北京唱片场录音棚\n"+
                            "[00:08.43]配唱制作人：王梓赫Ray\n"+
                            "[00:08.73]录音：姚海毅@北京光合声动录音室\n"+
                            "[00:09.19]萧/笛子：丁晓逵\n"+
                            "[00:09.39]混音/母带：郑昊杰@2496 Top Music Studio\n"+
                            "[00:09.75]制作助理：曾狗蛋\n"+
                            "[00:09.98]监制：刘硕/田丁\n"+
                            "[00:10.18]音频制作及营销：完美青春OST\n"+
                            "[00:12.53]lalalalalala\n"+
                            "[00:33.01]点点繁星 照夜深\n"+
                            "[00:35.99]照亮着 沉睡的人\n"+
                            "[00:39.48]谁的梦中 住着谁的情深\n"+
                            "[00:47.01]晚风送来 的余温\n"+
                            "[00:50.38]温暖着 谁的青春\n"+
                            "[00:53.98]像在诉说 故事里 年少的我们\n"+
                            "[01:01.78]光阴下的 两个人\n"+
                            "[01:04.78]多想就这样 平凡安稳\n"+
                            "[01:08.84]像今夏的夜\n"+
                            "[01:10.65]宁静而纯真\n"+
                            "[01:15.71]啊\n"+
                            "[01:22.78]错过所有的风景只愿得一人\n"+
                            "[01:30.21]啊\n"+
                            "[01:37.16]世间最美的是有你陪的清晨\n"+
                            "[02:13.98]晚风送来 的余温\n"+
                            "[02:16.77]温暖着 谁的青春\n"+
                            "[02:20.48]像在诉说 故事里 年少的我们\n"+
                            "[02:28.53]光阴下的 两个人\n"+
                            "[02:31.14]多想就这样 平凡安稳\n"+
                            "[02:35.25]像今夏的夜\n"+
                            "[02:37.07]宁静而纯真\n"+
                            "[02:41.71]啊\n"+
                            "[02:49.19]错过所有的风景只愿得一人\n"+
                            "[02:56.45]啊\n"+
                            "[03:03.63]世间最美的是有你陪的清晨\n"+
                            "[03:11.01]啊\n"+
                            "[03:18.04]走过颠沛流离只愿为你安身\n"+
                            "[03:24.65]啊\n"+
                            "[03:32.48]是你让漫长的时光\n"+
                            "[03:35.05]变得动人\n"+
                            "[99:99.99]~~~~~\n",
                },
                {
                    id: 2,
                    name:'李健 - 贝加尔湖畔',
                    singer: '李健',
                    sing_name:"贝加尔湖畔", 
                    sing_img: require("../../../assets/M_sing/jinxia.jpg"), 
                    sing_url: require("../../../assets/M_sing/李健 - 贝加尔湖畔.mp3"),
                    sing_lrc: "",
                },
                {
                    id: 3,
                    name:'周深 - 愿',
                    singer: '周深',
                    duration:"04:01", 
                    sing_img: require("../../../assets/M_sing/jinxia.jpg"), 
                    sing_url: require("../../../assets/M_sing//周深 - 愿.mp3"),
                    sing_lrc: "",
                }
            ],
            duration: "00:00", // 当前歌曲是时长
            currentTime: "00:00", // 当前歌曲暂停时播放的时间
            currentIndex: 0, // 当前歌曲索引
            lastIndex:0,
            currentList:[
                { 
                    id: 1, 
                    isheart: false,
                    musicSheet: ["我喜欢的音乐",""],
                    name:"电视剧《锦衣之下》片尾曲",  //album
                    singer:"谭松韵",
                    sing_name:"电视剧《锦衣之下》-今夏", 
                    duration: "04:01",
                    sing_img: require("../../../assets/M_sing/jinxia.jpg"), 
                    sing_url: require("../../../assets/M_sing/谭松韵 - 今夏.mp3"),
                    sing_lrc:  "[ti:今夏]\n"+
                            "[ar:谭松韵]\n"+
                            "[al:电视剧《锦衣之下》插曲]\n"+
                            "[by:junbo]\n"+
                            "[offset:0]\n"+
                            "[00:00.10]今夏 - 谭松韵\n"+
                            "[00:01.33]词：潇彬\n"+
                            "[00:01.99]曲：王梓赫Ray\n"+
                            "[00:03.12]制作人：王梓赫Ray\n"+
                            "[00:04.79]编曲：金若晨\n"+
                            "[00:05.95]弦乐编写：金若晨\n"+
                            "[00:07.67]吉他：张楚弦\n"+
                            "[00:07.84]弦乐：国际首席爱乐乐团@北京唱片场录音棚\n"+
                            "[00:08.43]配唱制作人：王梓赫Ray\n"+
                            "[00:08.73]录音：姚海毅@北京光合声动录音室\n"+
                            "[00:09.19]萧/笛子：丁晓逵\n"+
                            "[00:09.39]混音/母带：郑昊杰@2496 Top Music Studio\n"+
                            "[00:09.75]制作助理：曾狗蛋\n"+
                            "[00:09.98]监制：刘硕/田丁\n"+
                            "[00:10.18]音频制作及营销：完美青春OST\n"+
                            "[00:12.53]lalalalalala\n"+
                            "[00:33.01]点点繁星 照夜深\n"+
                            "[00:35.99]照亮着 沉睡的人\n"+
                            "[00:39.48]谁的梦中 住着谁的情深\n"+
                            "[00:47.01]晚风送来 的余温\n"+
                            "[00:50.38]温暖着 谁的青春\n"+
                            "[00:53.98]像在诉说 故事里 年少的我们\n"+
                            "[01:01.78]光阴下的 两个人\n"+
                            "[01:04.78]多想就这样 平凡安稳\n"+
                            "[01:08.84]像今夏的夜\n"+
                            "[01:10.65]宁静而纯真\n"+
                            "[01:15.71]啊\n"+
                            "[01:22.78]错过所有的风景只愿得一人\n"+
                            "[01:30.21]啊\n"+
                            "[01:37.16]世间最美的是有你陪的清晨\n"+
                            "[02:13.98]晚风送来 的余温\n"+
                            "[02:16.77]温暖着 谁的青春\n"+
                            "[02:20.48]像在诉说 故事里 年少的我们\n"+
                            "[02:28.53]光阴下的 两个人\n"+
                            "[02:31.14]多想就这样 平凡安稳\n"+
                            "[02:35.25]像今夏的夜\n"+
                            "[02:37.07]宁静而纯真\n"+
                            "[02:41.71]啊\n"+
                            "[02:49.19]错过所有的风景只愿得一人\n"+
                            "[02:56.45]啊\n"+
                            "[03:03.63]世间最美的是有你陪的清晨\n"+
                            "[03:11.01]啊\n"+
                            "[03:18.04]走过颠沛流离只愿为你安身\n"+
                            "[03:24.65]啊\n"+
                            "[03:32.48]是你让漫长的时光\n"+
                            "[03:35.05]变得动人\n"+
                            "[99:99.99]~~~~~\n",
                },
                {
                    id: 3,
                    isheart: false,
                    musicSheet: [""],
                    name:'电视剧《锦衣之下》片头曲',
                    singer: '周深',
                    sing_name: "愿",
                    duration: "04:29",
                    sing_img: require("../../../assets/M_sing/jinxia.jpg"), 
                    sing_url: require("../../../assets/M_sing//周深 - 愿.mp3"),
                    sing_lrc: "",
                },
                {
                    id: 2,
                    isheart: false,
                    musicSheet: ["我喜欢的音乐",""],
                    name:'贝加尔湖畔',
                    singer: '李健',
                    sing_name:"贝加尔湖畔", 
                    duration: "05:29",
                    sing_img: require("../../../assets/M_sing/jinxia.jpg"), 
                    sing_url: require("../../../assets/M_sing/李健 - 贝加尔湖畔.mp3"),
                    sing_lrc: "",
                }
            ],
        }
    },
    watch: {
        music() {
            if (this.$refs.audio != null) {
                this.$refs.audio.load();
            }
        }
    },
    updated() {
        // this.getaudioTime();
    },
    mounted(){
        if(!this.isPlay){
            this.$refs.audio.pause();
        };
        this.getaudioTime();
    },
    methods: {
        // 底部播放控制
        handleNext(){ // 当点击下一首时
            this.isPlay = true;
            switch (this.model_index) {
                case 0:
                    if(this.currentIndex === this.currentList.length-1){
                        this.currentIndex = 0;
                    }else{
                        this.currentIndex++;
                    }
                    break;
                case 1:
                    this.currentIndex = Math.floor(Math.random() * this.currentList.length); //随机播放
                    break;
                case 3: //单曲循环
                    break;
            }
            this.currentSrc = this.currentList[this.currentIndex].sing_url;
            this.lyricSrc = this.currentList[this.currentIndex].sing_lrc;
        },
        headlelast(){ // 当点击上一首时
            this.isPlay = true;
            if(this.currentIndex === 0){
                this.currentIndex = this.currentList.length-1;
            }else{
                this.currentIndex--;
            }
            this.currentSrc = this.currentList[this.currentIndex].sing_url;
            this.lyricSrc = this.currentList[this.currentIndex].sing_lrc;
            
            /* switch (this.model_index) {
                case 0:
                    if(this.currentIndex === 0){
                        this.currentIndex = this.currentList.length-1;
                    }else{
                        this.currentIndex--;
                    }
                    break;
                case 1: // 随机播放：可以将播放的歌曲存储入 localstory 中 进行获取，这里不做
                    
                    break;
                case 3: //单曲循环
                    break;
            } */
        },

        change(){ // 播放 暂停
            this.isPlay = !this.isPlay;
            if ( this.isPlay && this.$refs.audio.readyState == 4)
                this.$refs.audio.play();
            else {
                this.$refs.audio.pause();
            }
        },

        handleEnded(){ // 当歌曲播放结束时 循环下一首
            this.headlelast();
        },

        /* 设置播放时长 和 当前播放时间 */
        getaudioTime(){ // 获取当前歌曲的时长 和 播放时长
            if( this.$refs.audio != null ){
                this.currentTime = moment(this.$refs.audio.currentTime * 1000).format("mm:ss");
                this.duration = moment(this.$refs.audio.duration * 1000).format("mm:ss");
                this.bar_persent = this.$refs.audio.currentTime / this.$refs.audio.duration;
                this.$refs.music_bar && this.$refs.music_bar.setProgress(this.bar_persent);
            }  
            this.lyricSrc = this.currentList[this.currentIndex].sing_lrc;   
            
            /**歌词滚动 */
            if (this.$refs.audio.currentTime !== null) {
                this.$refs.lyric.Lyricscroll(this.$refs.audio.currentTime);
                this.$refs.player.$refs.playerLyric.maxScroll(this.$refs.audio.currentTime);
            }
        },

        /* 设置歌曲进度条 */
        setProgress(bar_persent){
            this.$refs.audio.currentTime = bar_persent * this.$refs.audio.duration;
            this.bar_persent = bar_persent;
        },

        /* 设置静音 */
        vioce_change(){
            this.isVoice = !this.isVoice;
            // this.$refs.audio.muted = !this.$refs.audio.muted; // 静音
            if (this.isVoice) {
                this.$refs.audio.volume = 0.0;
                this.$refs.volume && this.$refs.volume.setVoice(0);
            } else {
                this.$refs.audio.volume = this.persent;
                this.$refs.volume && this.$refs.volume.setVoice(this.persent);
            }
            
        },

        /* 设置音量 */
        setVolume(present) {
            this.$refs.audio.volume = present;
            this.persent = present;
        },

        /* 切换播放顺序 */
        change_model(){
            if( this.model_index < 2 ){
                this.model_index++;
            }else{
                this.model_index = 0;
            }
        },

        /* 是否显示歌词 */
        change_lyric(){
            this.isLyric = !this.isLyric;
        },

        /* 显示播放列表 */
        change_MusicList(){
            this.isList = !this.isList;
            console.log("111");
        },

        // 双击播放列表 播放当前音乐
        playCurrentMusic(musicIndex){
            this.isPlay = true;
            this.currentIndex = musicIndex;
            this.currentSrc = this.currentList[this.currentIndex].sing_url;
            this.lyricSrc = this.currentList[this.currentIndex].sing_lrc;
        },

        // 加入我喜欢的列表
        addheart(index){
            var str="我喜欢";
            this.currentList[index].musicSheet.push(str);
        },
        delheart(index){
            for(var i=0;i<this.currentList[index].musicSheet.length;i++){
                if(this.currentList[index].musicSheet[i] === "我喜欢"){
                    this.currentList[index].musicSheet.splice(i,1);
                }
            }
        },

        // 显示当前播放歌曲的详细信息页面
        show_player(){
            console.log("111");
            this.isPlayerShow = !this.isPlayerShow;
        },

        /**音乐出现错误 */
        musicErr() {
            // console.log("err");
            this.$Message.error("当前音频不可用");
            this.currentIndex++;
        },
    },
    filters:{
        dateFormat: function(dataStr,pattern="mm:ss"){
            return moment(dataStr * 1000).format(pattern);
        }
    },
    components:{
        voice_box,
        bar_progress,
        lyric_box,
        music_list,
        music_palyer,
        player,
    }
}
</script>

<style>
.redio_box{ display:flex; justify-content: baseline; width: 100%; background-color: #212124; position: relative; }

/* 控制播放 */
.redio_ctrl{ margin:10px 30px; }
.redio_ctrl img{ float: left; width: 40px; height: 40px; margin-left: 28px; cursor: pointer; }

/* 进度条 */
.progress_bar{ display:flex; justify-content: baseline; }
.progress_bar p{ line-height: 14px; width:40px; color: white; font-size: 14px; margin-top: 24px }


/* 音量 */
.voice_box{ display: flex; justify-content: baseline; }
.voice img{ width: 40px; height:40px; margin-top: 10px; cursor: pointer; }

/* 播放模式 */
.play_model{ margin-top: 15px; margin-left: 10px; }
.now_model{ width: 40px; height:40px; }
.now_model img{ float: left; width: 30px; height: 30px; cursor: pointer; }


/* 歌词控制 */
.lyric_change{ display: flex; justify-content: baseline; }
.lyric_change img{ width: 40px; height:40px; margin-top: 10px; cursor: pointer; }

/* 歌词盒子 */
.music_lyric{ position: absolute; left: 50%; top: -95px; z-index: 99; margin-left: -20%; }

/* 歌单 */
.bofang_list{  }
.bofang_list img{ width: 40px; height:40px; margin-top: 10px; cursor: pointer; }

.player_list{
  position: absolute;
  right: 10px;
  bottom: 60px;
  z-index: 99;
}

.miniplayer{
    position: absolute;
    left: 0;
    bottom: 60px;
}

.player_max{
    position: absolute;
    left: 0;
    bottom: 60px;
    z-index: 98;
    width: 100%;
    height: 796px; /** 796px; */
    background-color: #16181c;
    overflow: hidden;
}
</style>